<template>
	<div>
		
	</div>
</template>

<script setup>
	import { ref, reactive, computed, watch, watchEffect } from 'vue'
	const refVal = ref('13')
	const reactiveObj = reactive({
		name: 'Jack',
		age: 14
	})
	const refObj = ref({
		name: 'Jack',
		age: 14
	})
	const compSrc = ref(10)
	const compVal = computed(() => {
		console.log("computed计算 ", compSrc.value)
		return compSrc.value + 10
	})

	const goodsList = reactive([
		{ id: 190, name: '魏家凉皮', price: 10, num: 2 },
		{ id: 237, name: '肉夹馍', price: 11, num: 3 },
		{ id: 163, name: '冰峰', price: 3, num: 2 }
	])

	watch(goodsList, newVal => console.log("list发生变化", goodsList))

	watch(refVal, newVal => console.log("监听refVal " + newVal), { deep: true })

	watch(reactiveObj, newVal => console.log("监听reactiveObj ", newVal))

	watch(compVal, newVal => console.log("监听compVal " + newVal))

	watch(refObj, newVal => console.log("监听refObj", newVal))

	watchEffect()

</script>
<style scoped></style>